"use client"
import React, { useState } from 'react';
import {
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu, theme, Form, Input, Select, DatePicker, Button } from 'antd';
import { usePathname, useRouter } from "next/navigation";
const { Header, Sider, Content } = Layout;
export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    const pathname = usePathname()
    const router = useRouter()
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    return (

        <Layout style={{ height: '100vh' }}>
            <Sider style={{ backgroundColor: 'white', marginTop: '10px' }} trigger={null} collapsible collapsed={collapsed}>
                <div className="demo-logo-vertical" />
                <Input style={{ borderRadius: '20px', backgroundColor: 'white', width: '120px', fontSize: '12px' }} placeholder='请输入客户名称' />
                <Menu
                    style={{ backgroundColor: 'white', height: '100vh', width: '130px',marginTop:'30px' }}
                    theme="light"
                    mode="inline"
                    defaultSelectedKeys={[pathname]}
                    onSelect={(obj) => {
                        router.push(obj.key)
                    }}
                    items={[
                        {
                            key: '',
                            label: '审批管理',
                            children:[
                                {
                                    key: '/gpw/aaa',
                                    label: '订单审批',
                                },
                                {
                                    key: '/gpw/bbb',
                                    label: '回款审批',
                                },
                                {
                                    key: '/gpw/ccc',
                                    label: '退款审批',
                                },
                                {
                                    key: '/gpw/ddd',
                                    label: '报销审批',
                                },
                                {
                                    key: '/gpw/eee',
                                    label: '请假审批',
                                },
                            ]
                        },
                        
                    ]}
                />
            </Sider>
            <Layout>
                <Header style={{ padding: 0, background: colorBgContainer, }}>
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    {children}
                </Content>
            </Layout>
        </Layout>

    );
}
